<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
<?xml-stylesheet href="test_offsets.css" type="text/css"?>
<!--
  XUL Tests for client/scroll properties
  -->
<window title="Test Offset/Client/Scroll Properties" width="500" height="600"
        style="margin: 1px !important"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
  <script type="text/javascript" src="test_offsets.js"/>

<vbox id="testelements" style="margin: 0; padding: 0; border: 0;">
<vbox id="vbox" style="margin: 5px 0 0 2px;">
  <vbox id="noscroll" align="start">
    <button id="button1" label="Button One" style="margin: 0px; padding: 0; border: 0;"/>
    <button id="button2" label="Button Two" width="140" height="120"/>
  </vbox>
  <hbox align="start">
    <vbox id="scrollbox" style="overflow: scroll; padding: 2px; margin: 3px; border: 4px solid green;"
          maxwidth="66" maxheight="56">
      <label value="One" style="margin: 0"/>
      <label id="scrollchild" value="Two"/>
      <label value="Three"/>
      <label id="lastline" value="This fourth label is much longer than the others"
             style="margin: 0; padding: 0; border: 0;"/>
    </vbox>
    <vbox id="scrollbox-test">
       <scrollbar orient="vertical" style="border: 0; padding: 0;"/>
    </vbox>
  </hbox>
</vbox>

<!-- wrap svg in a div so that it can take its intrinsic width -->
<div>
<svg:svg id="svgbase" width="45" height="20" xmlns:svg="http://www.w3.org/2000/svg">
  <svg:rect id="svgrect" x="3" y="5" width="45" height="20" fill="red"/>
</svg:svg>
</div>

</vbox>

<button id="outermenu" type="menu" label="Menu">
  <menupopup id="outerpopup"
             style="margin-left: 5px; padding-left: 3px; padding: 0;"
             onpopupshown="this.firstChild.open = true"
             onpopuphidden="if (event.target == this) SimpleTest.finish();">
    <menu id="innermenu" label="Open"
          style="margin: 0; padding: 0; border: 2px black solid; -moz-appearance: none;">
      <menupopup style="margin: 0; padding: 0; border: 1px black solid; -moz-appearance: none;"
                 onpopupshown="testElements('outermenu', doneTests)">
        <menuitem label="Document"/>
        <menuitem id="innermenuitem" style="margin: 2px; padding: 3px;" label="Page"/>
      </menupopup>
    </menu>
    <menuitem id="outermenuitem" label="Close"/>
  </menupopup>
</button>

  <!-- test results are displayed in the html:body -->
  <body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>

  <!-- test code goes here -->
  <script type="application/javascript"><![CDATA[

var gTestSet = "box";

var whichpopup = "outer";

SimpleTest.waitForExplicitFinish();

function startTests()
{
  testElements('testelements', doneTests);
}

function doneTests()
{
  if (gTestSet == "box") {
    gTestSet = "popup";
    // only test this on Mac for now
    if (navigator.platform.indexOf("Mac") >= 0) {
      checkScrollState($("outerpopup"), 0, 0, 0, 0, "popup before open");
      checkClientState($("outerpopup"), 0, 0, 0, 0, "popup before open");
    }
    $("outermenu").open = true;
  }
  else {
    $("outermenu").open = false;
  }
}

SimpleTest.waitForFocus(startTests);

]]>
</script>

</window>
